<!-- 我的小店 -->
<template>
	<view>
		<shop-page ref="user_view" @changeUserData="changeUserData">
			<view slot="shop-bottom" :style="{'--color':vuex_config.themeColor1}">
				<view class="set-function" @click="setShop('name')">
					<view class="set-function-item">
						<u-icon class="icon" name="e696" size="33" color="#333" custom-prefix="iconfont"></u-icon>
						<view class="function-name">小店名称设置</view>
					</view>
					<u-icon name="e775" size="33" color="#ccc" custom-prefix="iconfont"></u-icon>
				</view>

				<view class="set-function">
					<view class="set-function-item">
						<u-icon class="icon" name="e739" size="33" color="#333" custom-prefix="iconfont"></u-icon>
						<view class="function-name">是否分享店铺</view>
					</view>
					<u-switch v-model="shareStatus" size="40" @change="change" :active-value="1" :inactive-value="0">
					</u-switch>
				</view>

				<view class="set-function" @click="setShop('data')">
					<view class="set-function-item">
						<u-icon class="icon" name="e617" size="33" color="#333" custom-prefix="iconfont"></u-icon>
						<view class="function-name">设置小店数据</view>
					</view>
					<u-icon name="e775" size="33" color="#ccc" custom-prefix="iconfont"></u-icon>
				</view>

				<view class="set-function" @click="setShop('shop')">
					<view class="set-function-item">
						<u-icon class="icon" name="e736" size="33" color="#333" custom-prefix="iconfont"></u-icon>
						<view class="function-name">进入我的小店</view>
					</view>
					<u-icon name="e775" size="33" color="#ccc" custom-prefix="iconfont"></u-icon>
				</view>
			</view>
		</shop-page>
	</view>
</template>

<script>
	import {
		uniLinkTo
	} from '@/utils/uniPromise.js';
	import {
		mapState,
		mapActions
	} from 'vuex';
	import shopPage from '../components/shopPage/index'
	export default {
		data() {
			return {
				shareStatus: 0, //店铺是否分享
				stateTime: null,
				userData: {}
			};
		},
		components: {
			'shop-page': shopPage
		},
		onLoad: function() {},
		onShow() {
			this.$nextTick(function() {
				this.$refs.user_view.$show()
			})
		},
		methods: {
			...mapActions(['loadUserInfo']),
			changeUserData(item) {
				this.shareStatus = item.store_status || 0
				this.userData = {
					...item
				}
			},
			// 选择是否分享
			change(status) {
				this.$loading()
				this.shareStatus = status;
				clearTimeout(this.stateTime);
				let params = {
					store_name: this.userData.store_name,
					store_status: status ? 1 : 0,
					users_id: this.userData.fk_users_id
				};
				this.$resPost('UpdateUsersStoreName', params);
				this.$refs.user_view.userData.store_status = status
				this.$hide()
			},

			setShop(name) {
				if (name == 'name') {
					// 设置小店名字
					uniLinkTo('/package/user/my-shop/shop-name/index');
				} else if (name == 'data') {
					//设置小店数据
					uniLinkTo('/package/user/my-shop/shop-data/index');
				} else {
					// 进入我的小店
					uniLinkTo(`/package/user/my-shop/go-shop/index?pk_id=${this.userData.pk_id}`);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.shop-bottom {
		margin-top: -20rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		overflow: hidden;
		background-color: #fff;
		padding-top: 20rpx;
	}

	.set-function {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 29rpx 0rpx 50rpx;
		height: 140rpx;

		.set-function-item {
			display: flex;
			align-items: center;

			.function-name {
				color: #333333;
				font-size: 32rpx;
				font-weight: 500;
				margin-left: 33rpx;
			}

			.icon {
				font-weight: bold;
			}
		}
	}
</style>
